<template>
    <view>
		<block v-if="mode === 'selector'">
			<view class="uni-padding-wrap">
			    <view class="uni-title">
					<block v-for="(item,index) in range">
						<block v-if="item[key] === value">{{item[name]}} </block>
					</block>
				</view>
			</view>
			<view class="picker-mask">
				<view class="picker-absolute">
					<picker-view v-if="visible" :indicator-style="indicatorStyle" :value="value" @change="bindChange" class="picker-view">
						<picker-view-column>
							 <view class="item" v-for="(item,index) in range" :key="index" >{{item[name]}}</view>
						</picker-view-column>
					</picker-view>
					<view class="picker-buttons">
						<view class="picker-cancel">取消</view>
						<view class="picker-confirm">确认</view>
					</view>
				</view>
			</view>
		</block>
		<block v-else-if="mode === 'multiSelector'">
			<view class="uni-padding-wrap">
			    <view class="uni-title">
					<block v-for="i in range" >
						<block v-for="(item,index) in range[i]" :key="index">
							<block v-if="item[key] === value[i]">{{item[name]}} </block>
						</block>
					</block>
				</view>
			</view>
			<view class="picker-mask">
				<view class="picker-absolute">
					<picker-view v-if="visible" :indicator-style="indicatorStyle" :value="value" @change="bindChange" class="picker-view">
						<picker-view-column v-for="i in range">
							<view class="item" v-for="(item,index) in range[i]" :key="index" >{{item[name]}}</view>
						</picker-view-column>
					</picker-view>
					<view class="picker-buttons">
						<view class="picker-cancel">取消</view>
						<view class="picker-confirm">确认</view>
					</view>
				</view>
			</view>
		</block>
		<block v-else>
			<picker ></picker>
		</block>
    </view>
</template>
<script>
    export default {
		props: {
			mode:{
				type: String,
				default: () => { return 'selector'}
			},
			range: {
				type: Array,
				default: () => { return []}
			},
			key: {
				type: String,
				default: () => { return ''}
			},
			name: {
				type: String,
				default: () => { return 'name'}
			},
			value: {
				type: [String, Array],
				default: () => { return 'id'}
			},
			disabled: {
				type: Boolean,
				default: () => { return false}
			}
		},
        data: function () {
            const date = new Date()
            const years = []
            const year = date.getFullYear()
            const months = []
            const month = date.getMonth() + 1
            const days = []
            const day = date.getDate()
            for (let i = 1990; i <= date.getFullYear(); i++) {
                years.push(i)
            }
            for (let i = 1; i <= 12; i++) {
                months.push(i)
            }
            for (let i = 1; i <= 31; i++) {
                days.push(i)
            }
            return {
                title: 'picker-view',
                years,
                year,
                months,
                month,
                days,
                day,
                value: [9999, month - 1, day - 1],
                visible: true,
                indicatorStyle: `height: 50px;`,
				pickerIndex: [],
            }
        },
        methods: {
            bindChange: function (e) {
                const val = e.detail.value;
				this.pickerIndex = [val];
            },
			pickerCallback(){
				if(this.mode === 'selector'){
					let val = 
				}
				this.$emit('pickerCallback', this.range[])
			}
        }
    }
</script>
<style>
	.picker-mask{
		position: fixed;
		z-index: 5000;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		background: rgba(0, 0, 0, 0.5);
		/* display: none; */
	}
	.picker-absolute{
		position: absolute;
		right: 0;
		bottom: 0;
		left: 0;
		background: #FFFFFF;
		padding: 32rpx 0;
	}
    .picker-view {
        height: 600rpx;
    }
    .item {
        line-height: 50px;
        align-items: center;
        justify-content: center;
        text-align: center;
    }
	.picker-buttons{
		display: flex;
		justify-content: space-around;
		padding: 30rpx 60rpx 15rpx;
	}
	.picker-cancel,  .picker-confirm{
		border-radius: 100rpx;
		color: #FFFFFF;
		text-align: center;
		padding: 15rpx 60rpx;
	}
	
	.picker-cancel{
		background: #FF4C3C;
	}
	.picker-confirm{
		background: #1890FC;
	}
</style>
